<!--职业健康登记表 healthSafeRpt-->
<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="130">
      <Row v-show="!switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="二级集团：" prop="twoLevelOrgName">
            <Select v-model="dataToQuery.twoLevelOrgName" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgName" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <Select clearable filterable style="width:300px" v-model="dataToQuery.companyName" placeholder="请选择企业"
                    :remote-method="remoteMethodSelectOrg"
                    :default-label="defaultLabel"
                    :loading="orgLoading">
              <Option v-for="(option, index) in orgLists" :value="option.orgName" :key="index">{{ option.orgName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="二级集团：" prop="twoLevelOrgName">
            <Select v-model="dataToQuery.twoLevelOrgName" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgName" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <Select clearable filterable style="width:300px" v-model="dataToQuery.companyName" placeholder="请选择企业"
                    :remote-method="remoteMethodSelectOrg"
                    :default-label="defaultLabel"
                    :loading="orgLoading">
              <Option v-for="(option, index) in orgLists" :value="option.orgName" :key="index">{{ option.orgName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="填表时间：" prop="content">
            <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange"
                        placement="bottom-end" placeholder="请选择查询时间段"
                        @on-change="onSelectQueryDateRange"></DatePicker>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="职业病危害因素：" prop="factorIll">
            <Select class='' placeholder="请选择危害因素" type='text' v-model='dataToQuery.factorIll'>
              <OptionGroup :label="type.name" v-for="(type,index) in hazardsTypeMap" :key="index">
                <Option v-for="factor in type.children" :value="factor.id" :key="factor.id">{{
                    factor.name
                  }}
                </Option>
              </OptionGroup>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="作业场所：" prop="bizLocation">
            <Input v-model='dataToQuery.bizLocation' class="query-form-el"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" :loading='pageStatus.baseDataloading' class="ivu-btn-add" icon="md-add"
                  @click="addInfo">新增
          </Button>
          <download-button :api="exportUrl" :queryForm="dataToQuery" />
          <!-- <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
    @on-sort-change="sortChange" show-summary :summary-method="(data) => this.gAmountTo(data,['victimNum','upPhysicalExamNum','physicalExamNum','demobilizedNum'])"        
    :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal title="职业健康登记表" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=800
           :styles="{height:'720px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?160:null"
                :label-position="mode === 'view'?'right':'top'">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='企业名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId'
                                @setOrgname="setCompanyName" :orgTree="true"
                                :currentOrgId="dataToView.companyId"
                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='所在地：' prop='companyAddress'>
                  <div v-if="mode === 'view'">{{ areaCodeToAreaName(dataToView.companyAddress) }}</div>
                  <Cascader v-else :data="tempAreaTree" v-model="dataToView.companyAddressArr" change-on-select
                            :transfer="true"
                            :load-data="areaTreeLoadData" :render-format="labels=>labels.join('·')" :clearable='false'
                            @on-change="(value,selectedData)=>{$set(dataToView,'companyAddress',value.join(','))}"></Cascader>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='作业场所：' prop='bizLocation'>
                  <div v-if="mode === 'view'">{{ dataToView.bizLocation }}</div>
                  <Input v-else type='text' v-model='dataToView.bizLocation'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='职业病危害因素：' prop='factorIll'>
                  <div v-if="mode === 'view'">{{ dataToView.factorIllStr }}</div>
                  <Select v-else class='keep-inline' placeholder="请选择危害因素" type='text'
                          v-model='dataToView.factorIllArr' multiple>
                    <OptionGroup :label="type.name" v-for="type in hazardsTypeMap">
                      <Option v-for="factor in type.children" :value="factor.id" :key="factor.id">{{
                          factor.name
                        }}
                      </Option>
                    </OptionGroup>
                  </Select>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='检测时间：' prop='factorTestDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.factorTestDate) }}</div>
                  <DatePicker v-else type="date" class='w' placeholder="请选择日期"
                              v-model='dataToView.factorTestDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='职业病危害接触人数：' prop='victimNum'>
                  <div v-if="mode === 'view'">{{ dataToView.victimNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.victimNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='岗中体检人数：' prop='physicalExamNum'>
                  <div v-if="mode === 'view'">{{ dataToView.physicalExamNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.physicalExamNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='岗前体检人数：' prop='upPhysicalExamNum'>
                  <div v-if="mode === 'view'">{{ dataToView.upPhysicalExamNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.upPhysicalExamNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='离岗人数：' prop='demobilizedNum'>
                  <div v-if="mode === 'view'">{{ dataToView.demobilizedNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.demobilizedNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <!--<Row type="flex" justify="space-around" class="code-row-bg">-->
            <!--<Col span="11">-->
            <!--<FormItem label='检测报告编号：' prop='checkCode'>-->
            <!--<div v-if="mode === 'view'">{{dataToView.checkCode}}</div>-->
            <!--<Input v-else class="w" v-model='dataToView.checkCode' ></Input>-->
            <!--</FormItem>-->
            <!--</Col>-->
            <!--<Col span="11">-->
            <!--</Col>-->
            <!--</Row>-->
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='检测机构：' prop='checkOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.checkOrg }}</div>
                  <Input v-else class="w" v-model='dataToView.checkOrg'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='体检结果正常人数：' prop='checkOkNum'>
                  <div v-if="mode === 'view'">{{ dataToView.checkOkNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.checkOkNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='体检结果异常人数：' prop='checkNoNum'>
                  <div v-if="mode === 'view'">{{ dataToView.checkNoNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.checkNoNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='复查人数：' prop='twoCheckNum'>
                  <div v-if="mode === 'view'">{{ dataToView.twoCheckNum }}</div>
                  <InputNumber v-else class="w" v-model='dataToView.twoCheckNum' :min="0"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='检测结果：' prop='testResult'>
                  <div v-if="mode === 'view'">{{ dataToView.testResult }}</div>
                  <Input v-else type='textarea' v-model='dataToView.testResult' show-word-limit maxlength="255"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='复查结果描述：' prop='twoCheckDesc'>
                  <div v-if="mode === 'view'">{{ dataToView.twoCheckDesc }}</div>
                  <Input v-else type='textarea' v-model='dataToView.twoCheckDesc' show-word-limit
                         maxlength="1024"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='出现职业禁忌、职业病情况：' prop='realStatus'>
                  <div v-if="mode === 'view'">{{ dataToView.realStatus }}</div>
                  <Input v-else type='textarea' v-model='dataToView.realStatus' show-word-limit
                         maxlength="1024"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='采取的相应措施：' prop='precaution'>
                  <div v-if="mode === 'view'">{{ dataToView.precaution }}</div>
                  <Input v-else type='textarea' v-model='dataToView.precaution'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填表人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填表时间：' prop='registTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.createDate' readonly></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
        </Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import _uniq from 'lodash/uniq'
import {Api} from '@/api/index.js'
import {mapState} from 'vuex'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from "@/common/cacheUtils";

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {
    cascaderDom
  },
  computed: {
    ...mapState('trhg', {
      areaMap: state => state.area.areaMap ? state.area.areaMap : [],
      areaTreeMap: state => state.area.areaTreeMap ? state.area.areaTreeMap : {},
    }),
  },
  data() {
    return {
      ...this.createCommonDataField(),
      defaultLabel: sessionStorage('userId').getObject('userId').companyName,
      orgLists: [],
      userInfo: sessionStorage('userId').getObject('userId'),
      twoLevelOrgs: [],
      orgLoading: false,
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRenderSum},
        // { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100 },
        {key: 'companyName', title: '企业名称', align: 'center', width: 240},
        {key: 'companyAddress', title: '所在地', align: 'center', width: 120, render: this.renderCellArea},
        {key: 'bizLocation', title: '作业场所', align: 'center', width: 180, tooltip: true},
        {
          key: 'factorIll', title: '职业病危害因素', align: 'center', render: (h, params) => {
            var arr = params.row.factorIll ? params.row.factorIll.split(',') : [], resArr = []
            for (var i = 0, il = arr.length; i < il; i++) {
              var id = arr[i]
              if (id in this.hazardsFactorMap) {
                resArr.push(this.hazardsFactorMap[id].name)
              }
            }
            return h('span', resArr.join('、'))
          }, minWidth: 180
        },

        {
          key: 'factorTestDate',
          title: '检测时间',sortable: "custom", 
          align: 'center',
          width: 150,
          render: this.renderCellDate
        },
        {key: 'checkCode', title: '检测报告编号', align: 'center', width: 150, tooltip: true},
        {key: 'testResult', title: '检测结果', align: 'center', width: 150, tooltip: true},
        {key: 'victimNum', title: '职业病危害接触人数', align: 'center', width: 150},
        {key: 'upPhysicalExamNum', title: '岗前体检人数', align: 'center', width: 150},
        {key: 'physicalExamNum', title: '岗中体检人数', align: 'center', width: 150},
        {key: 'demobilizedNum', title: '离岗人数', align: 'center', width: 150},
        {key: 'realStatus', title: '出现职业禁忌、职业病情况', align: 'center', width: 150, tooltip: true},
        {key: 'precaution', title: '采取的相应措施', align: 'center', width: 150, tooltip: true},
        {key: 'createDate', title: '填表时间',sortable: "custom",  align: 'left', width: 120, render: this.renderCellDate},
        this.getActionColumns((params) => {return params.row.id === '-1';}),
      ],
      ruleCustom: {
        // perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
        companyId: [{required: true, message: '请填写企业名称', trigger: 'change'}],
        companyAddress: [{required: true, message: '请填写所在地', trigger: 'change'}],
        // bizLocation: [ { required: true, message: '请填写作业场所', trigger: 'change' } ],
        // factorIll: [ { required: true, message: '请填写职业病危害因素', trigger: 'change' } ],
        // factorTestDate: [ { type:'date', required: true, message: '请填写检测时间', trigger: 'change' } ],
        // testResult: [ { required: true, message: '请填写检测结果', trigger: 'change' } ],
        victimNum: [
          // { required: true, message: '请填写职业病危害接触人数', trigger: 'change' },
          {pattern: /^(0|[1-9][0-9]*)$/, message: '职业病危害接触人数必须为数字', trigger: 'change', type: 'number'}
        ],
        physicalExamNum: [
          // { required: true, message: '请填写岗中体检人数', trigger: 'change' },
          {pattern: /^(0|[1-9][0-9]*)$/, message: '岗中体检人数必须为数字', trigger: 'change', type: 'number'}
        ],
        // realStatus: [ { required: true, message: '请填写出现职业禁忌、职业病情况', trigger: 'change' } ],
        // precaution: [ { required: true, message: '请填写采取的相应措施', trigger: 'change' } ],
        // notes: [ { required: true, message: '请填写备注', trigger: 'change' } ],
        rptPeroid: [{required: true, message: '请填写月份', trigger: 'change', type: 'date'}],
      },
      tableHeight: 10,

      hazardsTypeMap: {},
      hazardsFactorMap: {},
      // 彈出框
      dataToView: {physicalExamNum: null, victimNum: null},
      mode: 'add',
      dialogShow: false,
      // api
      queryUrl: Api.querySafeRptHealth,
      exportUrl: Api.exportSafeRptHealth,
      deleteUrl: Api.deleteSafeRptHealth,
      bthDeleteUrl: Api.batchDeleteSafeRptHealth,
      getUrl: Api.getSafeRptHealth,
      updateUrl: Api.updateSafeRptHealth,
      saveUrl: Api.saveSafeRptHealth,
      // type api
      getAllHazardsTypeUrl: Api.getAllHealthApi.replace('{{type}}', 'hazardsType'),
      getAllHazardsFactorUrl: Api.getAllHealthApi.replace('{{type}}', 'hazardsFactor'),
    }
  },
  async mounted() {
    this.queryTwoOrgInfo();
    this.setTableHeight(193);
    this.pageStatus.baseDataloading = true
    await this.$store.dispatch('trhg/area/query', {scope: this}, {root: true})
    await Promise.all([
      this.$http.get(this.getAllHazardsTypeUrl, {}),
      this.$http.get(this.getAllHazardsFactorUrl, {})
    ]).then((results) => {
      // 危害因素类型
      let hazardsTypeMap = {}
      let list = results[0].body.data
      for (let i = 0, il = list.length; i < il; i++) {
        let typeObj = list[i]
        typeObj.children = []
        hazardsTypeMap[typeObj.id] = typeObj
      }

      // 危害因素
      let hazardsFactorMap = {}
      list = results[1].body.data
      for (let i = 0, il = list.length; i < il; i++) {
        let obj = list[i]
        hazardsFactorMap[obj.id] = obj
        if (obj.typeId in hazardsTypeMap) {
          hazardsTypeMap[obj.typeId].children.push(obj)
        }
      }

      this.hazardsTypeMap = hazardsTypeMap
      this.hazardsFactorMap = hazardsFactorMap
    }).catch(e => {
      this.$Message.error("数据字典获取失败")
    });
    this.pageStatus.baseDataloading = false
    this.query();
    this.tempAreaTree = this.areaTreeMap['0']
  },
  methods: {
    ...pageCommonFunction,
    queryTwoOrgInfo() {
      if (sessionStorage('userId').getObject('userId').companyId != '18000000') {
        this.twoLevelOrgs.push({
          orgId: sessionStorage('userId').getObject('userId').twoLevelOrgId,
          orgName: sessionStorage('userId').getObject('userId').twoLevelOrgName
        });
      } else {
        this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
          this.twoLevelOrgs = res.data.data
        }).catch(e => {
        })
      }
    },
    remoteMethodSelectOrg(query) {
      if (query !== '') {
        this.orgLists = [];
        this.orgLoading = true;
        this.$http.get(Api.queryOrgList + "?companyId=" + this.userInfo.companyId + "&orgName=" + query + "&fromPage=1&pageSize=1000").then(res => {
          this.orgLists = res.data.data;
          this.orgLoading = false;
        }).catch(e => {
          this.orgLoading = false;
          this.$Message.error('请求失败');
        })
      } else {
        this.orgLoading = false;
      }
    },
    createEmptyDataToAdd() {
      return {
        companyAddressArr: [],
        victimNum: '0',
        physicalExamNum: '0',
        upPhysicalExamNum: '0',
        demobilizedNum: '0',
        checkOkNum: '0',
        checkNoNum: '0',
        twoCheckNum: '0'
      }
    },
    beforeEditDialogOpen(data) {
      if (data.row.factorIll) {
        data.row.factorIllArr = data.row.factorIll.split(',')
      }
      if (data.row.companyAddress) {
        data.row.companyAddressArr = data.row.companyAddress.split(',')
        data.row.companyAddressName = this.areaCodeToAreaName(data.row.companyAddress)
      }
    },
    async afterDataToViewInit(data) {
      if (data && data.companyAddress) {
        let companyAddressArr = data.companyAddress.split(',')
        this.tempAreaTree = []
        setTimeout(() => {
          this.tempAreaTree = this.addressEditArr(this.areaTreeMap, companyAddressArr)
        }, 100)
      }
    },
    beforeViewDialogOpen(data) {
      if (data.row.factorIll) {
        var arr = data.row.factorIll.split(','), resArr = []
        for (var i = 0, il = arr.length; i < il; i++) {
          resArr.push(this.hazardsFactorMap[arr[i]].name)
        }
        data.row.factorIllStr = resArr.join('、')
      }
    },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      this.queryAjax();
    },
    submit(name) {
      this.$set(this.dataToView, 'companyAddress', this.dataToView.companyAddressArr.join(','))
      if (this.dataToView.factorIllArr) {
        var factorIllArr = this.dataToView.factorIllArr,
            hazardsTypeArr = []
        for (var i = 0, il = factorIllArr.length; i < il; i++) {
          hazardsTypeArr.push(this.hazardsFactorMap[factorIllArr[i]].typeId)
        }
        hazardsTypeArr = _uniq(hazardsTypeArr)
        this.dataToView.factorIll = factorIllArr.join(',')
        this.dataToView.hazardsType = hazardsTypeArr.join(',')
      }
      this.submitAjax(name);
    },
  },
  watch: {},

}
</script>

<style lang='css' scoped>


.rpt-form {
}

/deep/ .rpt-form .query-form-el {
  width: 100%;
}

/deep/ .rpt-form .ivu-table-wrapper {
  overflow: visible;
}

/deep/ .rpt-form .ivu-table-wrapper .ivu-table {
  overflow: visible;
}

/* 多选select一行显示 */
/deep/ .ivu-select-multiple.keep-inline {
}

/deep/ .ivu-select-multiple.keep-inline .ivu-select-selection {
}

/deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div {
  height: 100%;
  width: 100%;
  padding-top: 3px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div .ivu-tag-checked {
  display: inline;
  padding: 0;
  background: none;
  border: none;
}

/deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div .ivu-tag-checked > span {
  margin: 0;
  display: inline;
}

/deep/ .ivu-select-multiple.keep-inline .ivu-select-selection > div .ivu-tag-checked .ivu-icon-ios-close {
  display: none;
}

</style>
